import { Delete, Edit } from '@mui/icons-material';
import { Box, Button, Divider, Menu, MenuItem, MenuProps } from '@mui/material';
import { alpha, styled } from '@mui/material/styles';
import { useRouter } from 'next/router';
import { useState } from 'react';

import PayrollGroup from '../../api/payroll-group/payroll-group';
import PayrollGroupManager from '../../api/payroll-group/payroll-group-manager';
import Routes from '../../constants/routes';
import LoadingPopup from '../loading-popup';
import PayrollGroupsPopup from '../payroll-groups/payroll-groups-popup';

const MenuButton = styled(Button)(() => ({
    background: '#1F1D37',
    color: '#ffffff',
    borderRadius: '0.75rem',
    width: 150,
    height: 40,
    fontSize: '1rem'
}));

const StyledMenu = styled((props: MenuProps) => (
    <Menu
        elevation={0}
        anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right'
        }}
        transformOrigin={{
            vertical: 'top',
            horizontal: 'right'
        }}
        {...props}
    />
))(({ theme }) => ({
    '& .MuiPaper-root': {
        background: '#1F1D37',
        borderRadius: 6,
        marginTop: theme.spacing(1),
        minWidth: 180,
        boxShadow:
            'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
        '& .MuiMenu-list': {
            padding: '4px 0'
        },
        '& .MuiMenuItem-root': {
            '& .MuiSvgIcon-root': {
                fontSize: 18,
                color: theme.palette.text.secondary,
                marginRight: theme.spacing(1.5)
            },
            '&:active': {
                backgroundColor: alpha(
                    theme.palette.primary.main,
                    theme.palette.action.selectedOpacity
                )
            }
        }
    }
}));

interface Props {
    payrollGroup: PayrollGroup;
    onEditPayrollGroup: Function;
}

export default function PayrollGroupMenu(props: Props) {
    const { payrollGroup, onEditPayrollGroup } = props;
    const router = useRouter();
    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);
    const [deleting, setDeleting] = useState<boolean>(false);
    const [editing, setEditing] = useState<boolean>(false);

    const onClicked = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget);
    };

    const onClosed = () => {
        setAnchorEl(null);
    };

    const onEditClicked = () => {
        onClosed();
        setEditing(true);
    };

    const onPopupClose = () => {
        setEditing(false);
    };

    const onDeleteClicked = async () => {
        onClosed();
        setDeleting(true);

        const deleted = await PayrollGroupManager.delete(payrollGroup.id);

        if (deleted == true) {
            router.push(Routes.PAYROLL_GROUPS);
        } else {
            setDeleting(false);
        }
    };

    return (
        <div>
            <MenuButton
                id="basic-button"
                aria-controls={open ? 'basic-menu' : undefined}
                aria-haspopup="true"
                aria-expanded={open ? 'true' : undefined}
                onClick={onClicked}
            >
                SETTINGS
                <Box
                    component="img"
                    sx={{
                        height: 20,
                        width: 20,
                        marginLeft: '10px'
                    }}
                    alt="Icon"
                    src={'/settings.svg'}
                />
            </MenuButton>

            <StyledMenu
                id="demo-customized-menu"
                MenuListProps={{
                    'aria-labelledby': 'demo-customized-button'
                }}
                anchorEl={anchorEl}
                open={open}
                onClose={onClosed}
            >
                <MenuItem onClick={onEditClicked} disableRipple>
                    <Edit />
                    Edit Payroll Group
                </MenuItem>
                <Divider sx={{ my: 0.5 }} />
                <MenuItem onClick={onDeleteClicked} disableRipple>
                    <Delete />
                    Delete Payroll Group
                </MenuItem>
            </StyledMenu>

            <PayrollGroupsPopup
                payrollGroup={payrollGroup}
                open={editing}
                onClose={onPopupClose}
                onEditPayrollGroup={onEditPayrollGroup}
            />
            <LoadingPopup show={deleting} message="Deleting Payroll Group" />
        </div>
    );
}
